<template>
    <div class="banner-block">
        <el-carousel :height="height" :interval=3000>
            <el-carousel-item v-for="item in bannerData" :key="item.picture">
                <div :style="{background: 'url('+item.picture+') top center no-repeat',height: '100%'}" class="item" @click="jumpPage(item.connect)"></div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator';

    @Component
    export default class Banner extends Vue {
        @Prop() bannerData!:any
        @Prop({
            default: '500px'
        }) height!:string

        jumpPage (link) {
            window.open(link)
        }
    }
</script>

<style lang="scss" scoped>
    .banner-block{
        width: 100%;
    }
    .el-carousel__item .item {
        cursor: pointer;
    }
</style>
<style lang="scss">
    .banner-block{
        .el-carousel{
            .el-carousel__indicators{
                bottom: 55px !important;
            }
            .el-carousel__button{
                height: 4px;
            }
            .el-carousel__arrow--left{
                display: none;
            }
            .el-carousel__arrow--right{
                display: none;
            }
        }
    }
</style>
